<template>
    <div>
         <div class="mui-table-view">															
            <h1>{{photoinfo.title}}</h1>
            <p class='mui-ellipsis'>
                <span>发表时间：{{photoinfo.add_time | dtaFormat}}</span>
                <span>点击：{{photoinfo.click}}次</span>
            </p>										                    							
		</div>
       <div>
        <vue-preview  :slides="litimg" @close="handleClose" ></vue-preview>
        </div>
        <!-- <img class="preview-img" v-for="(item, index) in litimg" :key="item.src" :src="item.src" height="100" @click="$preview.open(index, litimg)"> -->
        <div class="content" v-html="photoinfo.content"></div>
        <com-button :id='this.id'></com-button>
    </div>
</template>
<script>
    import axios from 'axios'
    import {Toast} from 'mint-ui'
    import comment from '../subcomponents/comment.vue'
    import VuePreview from 'vue-preview'
    import Qs from 'qs'

    export default {
        data(){
            return {
                photoinfo:{},
                litimg:[],
                id:this.$route.params.id
            }
        },
        created() {
            this.getphotoinfo()
            this.getlimg()
        },
        methods:{
            getphotoinfo(){
                axios({
                    method:'get',                   
                    baseURL:'http://www.liulongbin.top:3005',
                    // headers: {'X-Requested-With': 'XMLHttpRequest','Access-Control-Allow-Origin':'*'},
                    url:`/api/getimageInfo/${this.id}`
                }).then(res=>{
                    if(res.data.status===0){
                        this.photoinfo=res.data.message[0]
                        // console.log(res.data)
                    }else{
                        Toast("获取数据失败")
                    }
                })
            },
            getlimg(){
                axios({
                    method:'get',
                    url:`http://www.liulongbin.top:3005/api/getthumimages/${this.id}`
                }).then(res=>{
                    if(res.data.status===0){
                        // 循环每个图片数据，补全图片的宽和高 
                    res.data.message.forEach(item => {
                        item.title='Image Caption 1'
                        item.w=600;
                        item.h=400;
                    });
                    this.litimg=res.data.message;
                    console.log(res.data.message)
                    }
                    else{
                        Toast("获取数据失败")
                    }
                })
            },
            handleClose () {
                    console.log('close event')
        }
         
      },
        components:{
            "com-button":comment
        }
    }
</script>
<style lang="scss" scoped>
    .mui-table-view{   
        h1{
            font-size: 16px;
            line-height: 35px;
            color: blue;
            text-align: center
        }
        .mui-ellipsis{
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            color: rgb(138, 138, 143);
        }        
    }
    .content{
        font-size: 14px;
        line-height: 25px;
    }
    
</style>
